<template>
  <div class="detail-data" style="height: 100%">
    <div class="top">
      <el-page-header content="详情页面" @back="goBack" />
    </div>
    <div v-loading="isRequesting" class="bottom">
      <VirtualTable childrenAlisas="children" :rowStyle="rowStyle" :table="tableData">
        <!--Category-->
        <Cell align="left" label="Category" prop="category" :width="400" />

        <!--bu类型-->
        <Cell :label="$t('Cbom.bu')" prop="bu" />

        <!--产品专案-->
        <Cell :label="$t('Cbom.project')" prop="project" />

        <!--产品类型-->
        <Cell label="Project Category" prop="projectCategory" />

        <!--Subject-->
        <Cell label="Subject" prop="subject" />

        <Cell v-if="isHasPrice('January')" label="January">
          <template slot-scope="scope">
            <span>{{ monthPrice('January', scope.row.monthAndPrices) }}</span>
          </template>
        </Cell>

        <Cell v-if="isHasPrice('February')" label="February">
          <template slot-scope="scope">
            <span>{{ monthPrice('February', scope.row.monthAndPrices) }}</span>
          </template>
        </Cell>

        <Cell v-if="isHasPrice('March')" label="March">
          <template slot-scope="scope">
            <span>{{ monthPrice('March', scope.row.monthAndPrices) }}</span>
          </template>
        </Cell>

        <Cell v-if="isHasPrice('April')" label="April">
          <template slot-scope="scope">
            <span>{{ monthPrice('April', scope.row.monthAndPrices) }}</span>
          </template>
        </Cell>

        <Cell v-if="isHasPrice('May')" label="May">
          <template slot-scope="scope">
            <span>{{ monthPrice('May', scope.row.monthAndPrices) }}</span>
          </template>
        </Cell>

        <Cell v-if="isHasPrice('June')" label="June">
          <template slot-scope="scope">
            <span>{{ monthPrice('June', scope.row.monthAndPrices) }}</span>
          </template>
        </Cell>

        <Cell v-if="isHasPrice('July')" label="July">
          <template slot-scope="scope">
            <span>{{ monthPrice('July', scope.row.monthAndPrices) }}</span>
          </template>
        </Cell>

        <Cell v-if="isHasPrice('August')" label="August">
          <template slot-scope="scope">
            <span>{{ monthPrice('August', scope.row.monthAndPrices) }}</span>
          </template>
        </Cell>

        <Cell v-if="isHasPrice('September')" label="September">
          <template slot-scope="scope">
            <span>{{ monthPrice('September', scope.row.monthAndPrices) }}</span>
          </template>
        </Cell>

        <Cell v-if="isHasPrice('October')" label="October">
          <template slot-scope="scope">
            <span>{{ monthPrice('October', scope.row.monthAndPrices) }}</span>
          </template>
        </Cell>

        <Cell v-if="isHasPrice('November')" label="November">
          <template slot-scope="scope">
            <span>{{ monthPrice('November', scope.row.monthAndPrices) }}</span>
          </template>
        </Cell>

        <Cell v-if="isHasPrice('December')" label="December">
          <template slot-scope="scope">
            <span>{{ monthPrice('December', scope.row.monthAndPrices) }}</span>
          </template>
        </Cell>

        <Cell label="GAP" prop="gap" />
      </VirtualTable>
    </div>
  </div>
</template>
<script>
import Cell from '@/widgets/VirtualTable/Cell'
import VirtualTable from '@/widgets/VirtualTable/Table'
import { cbomReportList } from '@/api/cbom/report'
export default {
  name: 'CbomReportDetailData',

  components: { VirtualTable, Cell },

  props: {
    // 行数据
    rowData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // 正在查询
      isRequesting: false,
      // 表格数据
      tableData: [],
      // 颜色分层
      colorData: {
        1: '#B0E0E6',
        2: '#E0FFFF',
        3: '#90EE90',
        4: '#FFDEAD',
        5: '#FFFAF0',
        6: '#F5F5F5'
      }
    }
  },

  computed: {
    isHasPrice() {
      return month => {
        if (this.tableData.length > 0) {
          const one = this.tableData[0].monthAndPrices
          return one.findIndex(item => item.month === month) > -1
        }
        return false
      }
    }
  },
  created() {
    this.getDetailData()
  },

  methods: {
    // 拉取详情数据
    async getDetailData() {
      try {
        this.isRequesting = true
        const res = await cbomReportList({
          bu: this.rowData.bu,
          trackingSku: this.rowData.trackingSku,
          subject: this.rowData.subject,
          projectId: this.rowData.projectId
        })
        this.tableData = res.data
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    // 返回
    goBack() {
      this.$emit('cancel')
    },
    // 单元格样式
    cellClass() {
      return 'no-border'
    },
    // table 头部样式
    headerClass() {
      return 'background: #e4e4e4 !important;padding:5px 0px;'
    },

    rowStyle(index, row) {
      return {
        backgroundColor: this.colorData[row.level]
      }
    },

    monthPrice(month, list = []) {
      const result = list.find(item => item.month === month)
      return result ? result.price : ''
    }
  }
}
</script>
<style lang="scss" scoped>
.detail-data {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  overflow: hidden;
}
.top {
  padding-top: 10px;
  height: 50px;
}

.bottom {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 5px;
}
</style>
